HistoryMap.tsx ➔ HistoryMap - Code Metrics - Inspection of "Id 13" - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — dev (#7)

by Oscar

created 2023-01-03 09:34 UTC

HistoryMap.tsx ➔ HistoryMap B

↳ Parent: components/drawer/HistoryMap.tsx

Complexity

Conditions

Size

Total Lines	86
Code Lines	70

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	70
dl	0
loc	86
rs	7.9818
c	0
b	0
f	0
cc	3

How to fix Long Method

import { useState, useEffect } from 'react';
import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
import * as Location from 'expo-location';
import React from 'react';
import mapModel from '../../models/map';
import {API_KEY} from "@env";
import config from '../../config/config.json';
import Icon from 'react-native-vector-icons/Octicons';
import { start } from 'react-native-compass-heading';


export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
    const [startCoordinates, setStartCoordinates] = useState([]);
    const [endCoordinates, setEndCoordinates] = useState([]);

    console.log(journey);
    
    useEffect(() => {
        function setCoordinates() {
            if (modalVisible) {
                setStartCoordinates(journey['startPosition']);
                setEndCoordinates(journey['endPosition']);
            }
            
        };

        setCoordinates();
    })
    
    return (
        <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible)
        }}
        >
            <View style={styles.container}>
     
                <MapView
                    style={styles.map}
                    // region={{
                    //     // latitude: position.latitude? position.latitude : 0,
                    //     // longitude: position.longitude? position.longitude : 0,
                    //     // latitudeDelta: 0.03,
                    //     // longitudeDelta: 0.03,
                    // }}
                    userInterfaceStyle={'dark'}
                >
                <Marker 
                    coordinate={{latitude: startCoordinates[0], longitude: startCoordinates[1]}}
                />

                <Marker 
                    coordinate={{latitude: endCoordinates[0], longitude: endCoordinates[1]}}
                />
                </MapView>

                <View style={styles.infoContainer}>
                <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
                    <Icon 
                        name='arrow-left' 
                        size={25} 
                        color='black'
                    />
                </Pressable>
                    <View style={styles.info}>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Journey started</Text>
                            <Text>{journey.date}</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Information about the trip</Text>
                            <Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journey.totalMin} min </Text>

                            <Text> {journey.totalPrice} kr</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>ID</Text>
                            <Text>{journey['_id']}</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Vehicle</Text>
                            <Text>{journey.scooterName}</Text>
                        </View>

                    </View>
                </View>
            </View>
        </Modal>

    )
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        height: '100%',
        alignItems: "center",
        width: '100%'
    },

    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    
    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },

    infoContainer: {
        height: '100%',
        // flex: 1,
        // backgroundColor: 'red',
        justifyContent: 'flex-end',
        width: '100%'
    },

    info: {
        height: '45%',
        width: '100%',
        backgroundColor: 'white',
        justifyContent: 'space-around',
        alignItems: 'center'
    },

    listInfo: {
        // backgroundColor: 'red',
        height: '20%',
        borderBottomWidth: 1,
        width: '90%',
        flexDirection: 'row',
        justifyContent: 'space-between'
        // marginBottom: 10
    },

    infoTitle: {
        fontWeight: '600',
    },

    backButton: {
        position: 'absolute',
        width: 40,
        height: 40, 
        left: 20,
        backgroundColor: 'white',
        top: 5,
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },
});



1			import { useState, useEffect } from 'react';
2			import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
3			import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
4			import * as Location from 'expo-location';
5			import React from 'react';
6			import mapModel from '../../models/map';
7			import {API_KEY} from "@env";
8			import config from '../../config/config.json';
9			import Icon from 'react-native-vector-icons/Octicons';
10			import { start } from 'react-native-compass-heading';
11
12
13			export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
14			const [startCoordinates, setStartCoordinates] = useState([]);
15			const [endCoordinates, setEndCoordinates] = useState([]);
16
17			console.log(journey);
18
19			useEffect(() => {
20			function setCoordinates() {
21			if (modalVisible) {
22			setStartCoordinates(journey['startPosition']);
23			setEndCoordinates(journey['endPosition']);
24			}
25
26			};
27
28			setCoordinates();
29			})
30
31			return (
32			<Modal
33			animationType="slide"
34			transparent={true}
35			visible={modalVisible}
36			onRequestClose={() => {
37			setModalVisible(!modalVisible)
38			}}
39			>
40			<View style={styles.container}>
41
42			<MapView
43			style={styles.map}
44			// region={{
45			// // latitude: position.latitude? position.latitude : 0,
46			// // longitude: position.longitude? position.longitude : 0,
47			// // latitudeDelta: 0.03,
48			// // longitudeDelta: 0.03,
49			// }}
50			userInterfaceStyle={'dark'}
51			>
52			<Marker
53			coordinate={{latitude: startCoordinates[0], longitude: startCoordinates[1]}}
54			/>
55
56			<Marker
57			coordinate={{latitude: endCoordinates[0], longitude: endCoordinates[1]}}
58			/>
59			</MapView>
60
61			<View style={styles.infoContainer}>
62			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
63			<Icon
64			name='arrow-left'
65			size={25}
66			color='black'
67			/>
68			</Pressable>
69			<View style={styles.info}>
70
71			<View style={styles.listInfo}>
72			<Text style={styles.infoTitle}>Journey started</Text>
73			<Text>{journey.date}</Text>
74			</View>
75
76			<View style={styles.listInfo}>
77			<Text style={styles.infoTitle}>Information about the trip</Text>
78			<Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journey.totalMin} min </Text>
79
80			<Text> {journey.totalPrice} kr</Text>
81			</View>
82
83			<View style={styles.listInfo}>
84			<Text style={styles.infoTitle}>ID</Text>
85			<Text>{journey['_id']}</Text>
86			</View>
87
88			<View style={styles.listInfo}>
89			<Text style={styles.infoTitle}>Vehicle</Text>
90			<Text>{journey.scooterName}</Text>
91			</View>
92
93			</View>
94			</View>
95			</View>
96			</Modal>
97
98			)
99			}
100
101			const styles = StyleSheet.create({
102			container: {
103			// flex: 1,
104			height: '100%',
105			alignItems: "center",
106			width: '100%'
107			},
108
109			map: {
110			position: 'absolute',
111			top: 0,
112			left: 0,
113			bottom: 0,
114			right: 0,
115			},
116
117			shadowProp: {
118			elevation: 5,
119			shadowColor: 'black'
120			},
121
122			infoContainer: {
123			height: '100%',
124			// flex: 1,
125			// backgroundColor: 'red',
126			justifyContent: 'flex-end',
127			width: '100%'
128			},
129
130			info: {
131			height: '45%',
132			width: '100%',
133			backgroundColor: 'white',
134			justifyContent: 'space-around',
135			alignItems: 'center'
136			},
137
138			listInfo: {
139			// backgroundColor: 'red',
140			height: '20%',
141			borderBottomWidth: 1,
142			width: '90%',
143			flexDirection: 'row',
144			justifyContent: 'space-between'
145			// marginBottom: 10
146			},
147
148			infoTitle: {
149			fontWeight: '600',
150			},
151
152			backButton: {
153			position: 'absolute',
154			width: 40,
155			height: 40,
156			left: 20,
157			backgroundColor: 'white',
158			top: 5,
159			borderRadius: 25,
160			borderWidth: 1,
161			borderColor: 'gray',
162			alignItems: 'center',
163			justifyContent: 'center'
164			},
165			});
166
167

FalkenDev / SparkRentals-Mobile-App

Pull Request — dev (#7)

HistoryMap.tsx ➔ HistoryMap B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like